<%-- 
    Document   : registrarGastos
    Created on : 07-26-2012, 09:57:42 PM
    Author     : Alex
--%>

<%@include file="/include/header.jsp" %>
<style>
    #effect { width: 555px; height: 120px; padding: 0.4em; position: relative; font-size: 14px; border-style: hidden }
    #effect0 { width: 500px; height: 80px; padding: 0.4em; position: relative; font-size: 14px; border-style: hidden }
    #effect2 { height: 135px; padding: 0.4em; position: relative; font-size: 14px; border-style: hidden }
    #effect3 { height: 135px; padding: 0.4em; position: relative; font-size: 14px; border-style: hidden }
    #effect4 { height: 135px; padding: 0.4em; position: relative; font-size: 14px; border-style: hidden }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; font-size: 12px; }
</style>
<script type="text/javascript">
function ClearList(OptionList, TitleName) 
{
    OptionList.length = 0;
}
	
function move(side)
{   
    var temp1 = new Array();
    var temp2 = new Array();
    var tempa = new Array();
    var tempb = new Array();
    var current1 = 0;
    var current2 = 0;
    var y = 0;
    var attribute;

    //assign what select attribute treat as attribute1 and attribute2
    if (side == "right")
    {  
        attribute1 = document.getElementById("gastosForm").nameAndCarnet;
        attribute2 = document.getElementById("gastosForm").includeCarnets;
    }
    else
    {  
        attribute1 = document.getElementById("gastosForm").includeCarnets;
        attribute2 = document.getElementById("gastosForm").nameAndCarnet;
    }

    //fill an array with old values
    for (var i = 0; i < attribute2.length; i++)
    {  
        y = current1++
        temp1[y] = attribute2.options[i].value;
        tempa[y] = attribute2.options[i].text;
    }

    //assign new values to arrays
    for (var j = 0; j < attribute1.length; j++)
    {   
        if ( attribute1.options[j].selected )
        {  
            y = current1++
            temp1[y] = attribute1.options[j].value;
            tempa[y] = attribute1.options[j].text;
        }
        else
        {  
            y = current2++
            temp2[y] = attribute1.options[j].value; 
            tempb[y] = attribute1.options[j].text;
        }
    }

    //generating new options 
    for (var k = 0; k < temp1.length; k++)
    {  
        attribute2.options[k] = new Option();
        attribute2.options[k].value = temp1[k];
        attribute2.options[k].text =  tempa[k];
    }

    //generating new options
    ClearList(attribute1,attribute1);
    if (temp2.length > 0)
    {	
        for (var n = 0; n < temp2.length; n++)
        {   
            attribute1.options[n] = new Option();
            attribute1.options[n].value = temp2[n];
            attribute1.options[n].text =  tempb[n];
        }
    }
}

function save(){
    var form = document.getElementById("gastosForm");
    if(validarForm() == true){
        if(form.cmd.value == "RegistrarGasto"){
            var options = form.includeCarnets.options;
            var cantBec = options.length;
            form.cantBecBenef.value = cantBec;
            var len = options.length - 1;
            var i = 0;
            var carnets = "";
            for (i = len; i >= 0; i--){
                carnets = carnets + options[i].value + "|";
            }
            carnets = carnets.substring(0,carnets.length-1);   
            //form.cmd.value = "RegistrarGasto";
            document.getElementById("tokens").value = carnets;
        }
        form.submit();
    }
}

function validarForm(){
    var form = document.getElementById("gastosForm");
    var monto = form.monto.value;
    if(isNaN(monto)){
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#dialog-message" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
        return false;
    } else {
        if (String(monto).indexOf(".") < String(monto).length - 3) {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        } else {
            return true;
        }
    }
}

function viewGastos(){
    //var options = {};
    //$("#tablaGastos").show("fold", options, "slow");
    var form = document.getElementById("gastosForm");
    var url = form.action + "?cmd=initBusqueda";
    window.open(url, "gastosWin", "HEIGHT=600, WIDTH=950, MODAL=YES, scrollBars=YES");
}

function nuevo(){
    var form = document.getElementById("gastosForm");
    //var url = getBaseURL();
    //url = url + "Gastos.jsa?cmd=init";
    var url = "./Gastos.jsa?cmd=init";
    form.action = url;    
    form.submit();
}


</script>

<div class="content">
    
    <html:form styleId="gastosForm" action="/Gastos">
        <logic:equal name="save" value="new">
            <html:hidden property="cmd" value="RegistrarGasto" />
        </logic:equal>
        <logic:notEqual name="save" value="new">
            <html:hidden property="cmd" value="ModificarGasto" />
        </logic:notEqual>
        <html:hidden property="idGasto" />
        <html:hidden property="tokens" styleId="tokens" />
        <logic:equal name="extra" value="yes">
            <html:hidden property="tipo" styleId="tipo" value="V" />
        </logic:equal>
        <logic:notEqual name="extra" value="yes">
            <html:hidden property="tipo" styleId="tipo" value="F" />
        </logic:notEqual>
        <html:hidden property="cantBecBenef" value="0" />
    <table class="form">
        <logic:notEqual name="extra" value="yes">
            <caption class="titleSeg">Registro de Gastos</caption>
        </logic:notEqual>
        <logic:equal name="extra" value="yes">
            <caption class="titleSeg">Registro de Gastos Extraordinarios</caption>
        </logic:equal>     
            
            <logic:equal name="save" value="new">
                <tr class="campos">
                    <td class="label">Monto:&nbsp;&nbsp;$</td>
                    <td class="control"><html:text property="monto" /></td>
                    <td width="30px"></td>
                    <td class="label">Concepto:&nbsp;</td>
                    <td class="control"><html:text property="concepto" /></td>
                </tr>
                <tr>
                    <td style="text-align: right" colspan="3">Generar recibos individuales:&nbsp;</td>
                    <td class="control" colspan="2"><html:checkbox value="1" property="recIndiv" styleId="recIndiv" /></td>
                </tr>
                <tr>
                    <td colspan="5"><br /><strong>Nota: Ingrese siempre el monto que desea que aparezca en el o los recibos correspondientes</strong></td>
                </tr>
            </logic:equal>
        
            <logic:notEqual name="save" value="new">
                <tr class="campos">
                    <td class="label">Monto:&nbsp;&nbsp;$</td>
                    <td class="control"><html:text readonly="true" property="monto" /></td>
                    <td width="50px"></td>
                    <td class="label">Concepto:&nbsp;</td>
                    <td class="control"><html:text readonly="true" property="concepto" /></td>
                </tr>
            </logic:notEqual>
        
        <!-- SOLO SE MUESTRAN EN MODO EDICION -->
        
            <logic:notEqual name="save" value="new">
                <tr class="campos">
                    <td class="label">Estado del Gasto:&nbsp;</td>
                    <td class="control" colspan="4">
                        <html:select property="estado" styleId="proy">
                            <html:option value="N/A">--- Seleccione un estado ---</html:option>
                            <html:option value="CANCELADO">Anulado</html:option>
                            <html:option value="ELIMINADO">Eliminado</html:option>
                        </html:select>
                    </td>
                </tr>
                <tr class="campos">
                    <td class="label">Justificaci&oacute;n:&nbsp;&nbsp;</td>
                    <td class="control" colspan="4"><html:text property="justificacion" styleClass="tinput404" /></td>
                </tr>    
            </logic:notEqual>
        
        <!-- ------------------------------------------ -->
        
        <tr>
            <td colspan="5"><br /></td>
        </tr>
        <logic:present name="becarios" scope="request">
            
            
            <!-- MOSTRAR EN MODO NUEVO -->
            <logic:equal name="save" value="new">
            <tr>
                <td colspan="5">
                    <div class="toggler">
                        <div id="effect" class="ui-widget-content ui-corner-all">
                            <h3 class="titleSeg">Selecci&oacute;n de Becarios</h3>
                            <p style="text-align: justify">
                            Traslade de la lista de la izquierda a la de la derecha el o los becarios que recibir&aacute;n el monto.
                            Haga doble clic sobre alguno de los elementos para trasladarlo de una lista a la otra. Tambi&eacute;n
                            puede seleccionar un elemento en la lista y usar los botones <strong> >> </strong>  y <strong> &lt;&lt; </strong> para trasladarlo a la lista de la
                            derecha o a la de la izquierda respectivamente.
                            </p>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="5"><br /></td>
            </tr>
            <tr class="campos">
                <td colspan="2">
                    <div id="effect2" class="ui-widget-content ui-corner-all">
                        <p style="text-align: right">
                            <html:select styleId="becar" property="nameAndCarnet" multiple="true" ondblclick="move('right');">
                                <html:options collection="becarios" property="nameAndCarnet" labelProperty="nameAndCarnet" labelName="nameAndCarnet" />
                            </html:select>
                        </p>
                    </div>
                </td>
                <td>
                    <div id="effect3" class="ui-widget-content ui-corner-all">
                        <p style="text-align: center">
                            <html:button styleClass="button" styleId="btnRight" onclick="move('right');" property="right" value=">>" />
                        </p>
                        <p style="text-align: center">
                            <html:button styleClass="button" styleId="btnLeft" onclick="move('left');" property="left" value="<<" />
                        </p>
                    </div>
                </td>
                <td colspan="2">
                    <div id="effect4" class="ui-widget-content ui-corner-all">
                        <p style="text-align: left">
                            <select name="includeCarnets" id="includeCarnets" multiple="multiple" ondblclick="move('left');"></select>
                        </p>
                    </div>
                </td>
            </tr>
            </logic:equal>
            <!-- ----------------------- -->
        </table>
        <table class="form">
            <!-- MOSTRAR EN MODO EDICION -->
            <logic:notEqual name="save" value="new">
                <tr>
                <td colspan="5">
                    <div class="toggler">
                        <div id="effect0" class="ui-widget-content ui-corner-all">
                            <h3 class="titleSeg">Becarios Beneficiados</h3>
                            <p style="text-align: justify">
                            Se muestran en la lista de la derecha, los becarios beneficiados con el gasto seleccionado.
                            </p>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class="campos">
                <td colspan="2">
                    <div id="effect2" class="ui-widget-content ui-corner-all">
                        <p style="text-align: right">
                            <html:select styleId="becar" disabled="true" property="nameAndCarnet" multiple="true" ondblclick="move('right');">
                                <html:options collection="becarios" property="nameAndCarnet" labelProperty="nameAndCarnet" labelName="nameAndCarnet" />
                            </html:select>
                        </p>
                    </div>
                </td>
                <td>
                    <div id="effect3" class="ui-widget-content ui-corner-all">
                        <p style="text-align: center">
                            <html:button styleClass="button" disabled="true" styleId="btnRight" onclick="move('right');" property="right" value=">>" />
                        </p>
                        <p style="text-align: center">
                            <html:button styleClass="button" disabled="true" styleId="btnLeft" onclick="move('left');" property="left" value="<<" />
                        </p>
                    </div>
                </td>
                <td colspan="2">
                    <div id="effect4" class="ui-widget-content ui-corner-all">
                        <p style="text-align: left">
                            <html:select styleId="becar" disabled="true" property="nameAndCarnet" multiple="true" ondblclick="move('right');">
                                <html:options collection="becariosBenef" property="nameAndCarnet" labelProperty="nameAndCarnet" labelName="nameAndCarnet" />
                            </html:select>
                        </p>
                    </div>
                </td>
            </tr>
            </logic:notEqual>
            <!-- ----------------------- -->
        </logic:present> <!-- Cierre del Logic de BecariosList -->
        
        <logic:present name="msg">
            <tr>
                <td colspan="5"><br /></td>
            </tr>
            <tr>
                <td colspan="5" class="success">
                    <html:img src="./images/ok.png" />&nbsp;
                    <html:messages id="mensaje" name="msg">
                        <bean:write name="mensaje" />
                    </html:messages>
                </td>
            </tr>
        </logic:present> <!-- Cierre del Logic de mensajes -->
        <logic:present name="errors">
            <tr>
                <td colspan="5"><br /></td>
            </tr>
            <tr>
                <td colspan="5" class="errors">
                    <html:img src="./images/error.png" />&nbsp;<html:errors name="errors" />
                </td>
            </tr>
        </logic:present> <!-- Cierre del Logic de errores -->
        
        
        <tr>
            <td colspan="5"><br /></td>
        </tr>
        <tr class="botones">
            <td colspan="5">
                <html:button property="btnSubmit" onclick="save();" value="Guardar" styleClass="button" />
                &nbsp;&nbsp;&nbsp;&nbsp;
                <html:button property="btnView" onclick="viewGastos();" value="Ver Gastos Registrados" styleClass="button" />
                &nbsp;&nbsp;&nbsp;&nbsp;
                <html:button property="btnReset" onclick="nuevo();" value="Nuevo" styleClass="button" />
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <br />
            </td>
        </tr>
    </table>                
</html:form>
    
    <!-- DIVS DE MENSAJES DE VALIDACIONES -->
    
    <div id="dialog-message" style="display: none" title="Advertencia">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            El monto debe ser un valor num&eacute;rico de hasta 2 decimales. Ej.: 120.25; 20.57; etc.
	</p>
    </div>
    
    <!-- ******************************* -->
    
</div>
<%@include file="/include/footer.jsp" %>